<template>
    <div class="bread-wrapper">
        <Breadcrumb>
            <BreadcrumbItem v-for="(item,index)  in levelList" :key="item.path">
                <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.name}}</span>
                <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
            </BreadcrumbItem>
        </Breadcrumb>
    </div>
</template>
<script type="text/javascript">
    export default{
        data(){
            return{
                levelList: null
            }
        },
        mounted(){
            this.getBreadcrumb();
        },
        watch:{
            $route(){
                this.getBreadcrumb();
            }
        },
        methods:{
            getBreadcrumb() {
                let matched = this.$route.matched.filter(item => item.name);
                const first = matched[0];
                if (first && (first.name !== '首页' || first.path !== '')) {
                  matched = [{ name: '首页', path: '/' }].concat(matched)
                }
                console.log(matched)
                this.levelList = matched;
              }
        }
    }
</script>
<style type="text/css" scoped>
    .bread-wrapper{ max-width:1200px; margin:20px auto 0;}
    @media (max-width: 992px){
        .bread-wrapper{ display:none; }
    }
</style>